<template>
  <view>
    <view class="alldiv">
      <view class="topBox">
        <!-- 第一层返回 -->
        <view class="topdiv">
          <image src='@/static/icon/shop/topBj2.png' class="background-image"></image>
          <view class="navdiv" @click="navigateBack">
            <u-icon :customStyle="{ marginRight: 32 + 'rpx' }" name="arrow-left" size="17" color="rgba(0,0,0,0.9)" labelColor="rgba(0,0,0,0.9)" :label="language.FreeRide.sfc"></u-icon>
          </view>
        </view>
      </view>
      <view class="bodydiv">
        <!-- 接单信息 -->
        <text class="title van-ellipsis">
          {{ language.FreeRide.czyjd }}
        </text>
        <text class="sub-title van-ellipsis" v-show="startTime">{{this.language.FreeRide.yjzw}}{{ startTime }} | {{ peopleNum }} {{ language.FreeRide.people }}</text>
        <view class="item" style="margin-top: 24rpx;">
          <view class="go-time" v-show="startTime"><text class="green">{{this.language.FreeRide.yjzw}}{{ startTime }}</text>{{ language.FreeRide.jdn }}</view>
          <!-- 司机信息 -->
          <view class="driver-info" v-show="driverInfo.idCardNum">
            <view class="profile-photo mr10">
              <u-avatar :src="driverInfo.headPortrait || driverPhoto"></u-avatar>
            </view>
            <view class="infos">
              <view class="info">
                <view class="driver-name mr10">{{ driverInfo.name }}</view>
                <view class="license-plate">{{ driverInfo.carModel }}</view>
              </view>
              <text class="sub-title van-ellipsis">{{ driverInfo.score ? driverInfo.score.toFixed(1) : '' }} {{ language.FreeRide.mark }} | {{ language.FreeRide.jd }} {{ driverInfo.orderNums }} {{ language.FreeRide.c }}</text>
            </view>
            <a :href="'tel:' + driverInfo.mobile"  class="contact-driver" style="right: 74rpx;" v-show="driverInfo.mobile">
              <u-icon :name="icon.phone"></u-icon>
            </a>
            <a class="contact-driver">
              <view class="badge"></view>
              <u-icon :name="icon.chat"></u-icon>
            </a>
          </view>
        </view>
        <!-- 行程费用 -->
        <view class="item">
          <text class="title van-ellipsis">
            {{ language.FreeRide.xcfy }}
          </text>
          <view class="pay-num">
            <view><text class="green">{{ payNum }}</text>{{ language.FreeRide.carPoolingTextTip2 }}</view>
          </view>
          <!-- 地址 -->
          <view class="address-box" v-show="startAddress">
            <view class="date" v-show="goTime">
              <u-icon style="margin-right: 16rpx;" name="clock-fill" size="12"></u-icon>
              {{ goTime }}
            </view>
            <view class="origin-station">
              <text class="van-ellipsis">{{ startAddress }}</text>
            </view>
            <view class="destination">
              <text class="van-ellipsis">{{ endAddress }}</text>
            </view>
          </view>
          <!-- 操作 -->
          <view class="other-use">
            <view class="other-use-item" v-for="item in otherUseList" :key="item.id" @click="optionFun(item.id)">
              <u-icon :name="item.icon" size="16"></u-icon>
              <view class="name">{{ item.name }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 付费信息 -->
    <u-popup :show="true" mode="bottom" round="20">
      <view class="popup-div">
        <text class="popup-title">
          {{ language.FreeRide.czydd }}
          <text class="green">{{ waitTime }}</text>
        </text>
        <text class="popup-sub-title">{{ language.FreeRide.yfcfhczclj }}</text>
        <u-button
          class="button"
          :text="language.FreeRide.qrtxyf + payNum + language.FreeRide.carPoolingTextTip2"
          shape="circle"
          color="linear-gradient(90deg, rgba(65, 240, 135, 1) 0%, rgba(47, 212, 184, 1) 100%)"
          :disabled="!payNum || !driverId"
          @click="payFun"
        />
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getTaxiOrder, getDriverInfo, payment, cancelOrder } from '@/api/driver'
export default {
  data() {
    return {
      language: {},
      startTime: '',
      goTime: '',
      peopleNum: '',
      carPoolingStatus: '拼车中',
      startAddress: '',
      endAddress: '',
      otherUseList: [],
      driverPhoto: require('@/static/image/BankCard.png'), // 司机默认头像
      driverInfo: {},
      icon: {
        phone: require('@/static/image/dial.png'),
        chat: require('@/static/image/chat.png'),
      },
      payNum: '',
      waitTime: '',
      orderId: 0,
      driverId: 0,
      planEndTime: '' // 最迟出发时间
    }
  },
  // onShow: function() {
  //   this.getlanguagedata();
  // },
  onLoad(option) {
    if (!option.id) {
      this.navigateBack()
    }
    this.orderId = option.id
    this.getlanguagedata();
    try {
      getTaxiOrder({id: option.id}).then(res => {
        if (res.code === 0) {
          if (res.data?.planStartTime && res.data?.planEndTime) {
            this.planEndTime = res.data.planEndTime;
            this.startTime =  this.convertDate(res.data?.planEndTime);
            this.goTime = this.convertDateString(res.data?.planStartTime) + ' - ' + this.convertDateString(res.data?.planEndTime)
          }
          this.startAddress = res.data.startPlace;
          this.endAddress = res.data.endPlace;
          this.payNum = res.data.cost;
          this.peopleNum = res.data.passengers || 1;
          // 等待时间
          if (res.data.receiveTime) {
            const nowTime = new Date().getTime()
            const startTime = new Date(res.data.receiveTime).getTime()
            const differ = Math.floor((nowTime - startTime) / 1000 / 60)
            this.waitTime = String(Math.floor(differ / 60)).padStart(2, '0') + ':' + String(differ % 60).padStart(2, '0')
          }
          // 获取司机信息
          if (res.data.driverId) {
            this.driverId = res.data.driverId
            this.getDriver(res.data.driverId);
          }
        }
      })
    } catch (error) {
      console.log(error)
    }
  },
  methods: {
    navigateBack() {
      uni.reLaunch({
        url: "/pages/Home/Home",
      });
    },
    goNext() {
      uni.redirectTo({
        url: `/pages/Home/freeRide/bookedSuccess?id=${this.orderId}&driverId=${this.driverId}`,
      });
    },
    getlanguagedata() {
      this.language =
        this.$store.getters["internationalization/getinternationalization"];
      this.otherUseList = [
        {
          id: 0,
          icon: require('@/static/image/phone.png'), // 修改手机
          name: this.language?.FreeRide.xgsj,
        },{
          id: 1,
          icon: require('@/static/image/cancel.png'), // 取消行程
          name: this.language.FreeRide.qxxc,
        },
        {
          id: 2,
          icon: require('@/static/image/service.png'), // 客服中心
          name: this.language.FreeRide.kfzx,
        }
      ]
    },
    convertDate(dateString) {
      if (!dateString) return '';
      let today = new Date();
      let tomorrow = new Date();
      tomorrow.setDate(today.getDate() + 1);
      // 将时间设置为 00:00:00
      tomorrow.setHours(0, 0, 0, 0);
      const tomorrowTime = tomorrow.getTime() // 明天凌晨
      tomorrow.setDate(tomorrow.getDate() + 1)
      const tomorrowTime2 = tomorrow.getTime() // 后天凌晨
      tomorrow.setDate(tomorrow.getDate() + 1)
      const tomorrowTime3 = tomorrow.getTime() // 大后天凌晨
      const nowTime = new Date(dateString).getTime()

      const [datePart, timePart] = dateString?.split(' ');
      const [hours, minutes] = timePart?.split(':');
      if (nowTime < tomorrowTime) {
        return `${this.language.FreeRide.timeList[0]}${hours}:${minutes}`
      } else if (nowTime < tomorrowTime2) {
        return `${this.language.FreeRide.timeList[1]}${hours}:${minutes}`
      } else if (nowTime < tomorrowTime3) {
        return `${this.language.FreeRide.timeList[2]}${hours}:${minutes}`
      } else {
        return `${datePart} ${hours}:${minutes}`
      }
    },
    convertDateString(dateString) {
      // 使用正则表达式提取日期和时间部分
      const [datePart, timePart] = dateString?.split(' ');
      const [year, month, day] = datePart?.split('-');
      const [hours, minutes] = timePart?.split(':');
      
      // 格式化为目标格式
      return `${year}${this.language?.FreeRide.year}${month}${this.language?.FreeRide.month}${day}${this.language?.FreeRide.day} ${hours}:${minutes}`;
    },
    // 获取司机信息
    getDriver(driverId) {
      try {
        getDriverInfo({id: driverId}).then(res => {
          this.driverInfo = res.data
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 支付接口
    payFun() {
      try {
        payment({orderId: this.orderId}).then(res => {
          this.goNext()
        })
      } catch (error) {
        console.log(error)
      }
    },
    // 操作
    optionFun(id) {
      if (!this.orderId) return
      switch(id) {
        case 1:
          // 取消行程
          uni.showLoading({
            title: 'loading...'
          });
          try {
            cancelOrder({orderId: this.orderId, orderStatus: 3}).then(res => {
              uni.showToast({
                title: this.language.Takingataxi.orderCancelSuccess,
                icon: "none"
              });
              uni.hideLoading();
              uni.navigateTo({
                url: `/pages/Home/freeRide/tripCancellation?id=${this.orderId}`,
              });
            }).catch(error => {
              uni.hideLoading();
            });
          } catch (error) {
            uni.hideLoading();
            console.log(error)
          }
          break;
      }
    }
  }
}
</script>

<style scoped lang="less" src="@/static/css/takingataxi.less"></style>
<style lang="less" scoped>
.alldiv {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .topBox {
    position: relative;
    width: 100%;
    background: linear-gradient(94.07deg, rgba(235, 255, 236, 1) 0%, rgba(220, 247, 242, 1) 100%);
    overflow: hidden;
    flex-shrink: 0;
    .background-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    // 这个是搜索和返回样式
    .topdiv {
      width: 100%;
      height: 180px;
      display: flex;
      margin: calc(var(--status-bar-height) + 10px) 0 4px 0;
      // 这个是返回样式
      .navdiv {
        position: relative;
        margin-left: 17px;
        height: 34px;
        display: flex;
        justify-content: center;
        overflow: hidden;
        ::v-deep {
          .u-icon__label {
            font-size: 14px;
          }
        }
      }
    }
  }
  .bodydiv {
    position: relative;
    flex: 1;
    height: 0;
    overflow-y: auto;
    background-color: #fff;
    margin-top: -134px;
    border-radius: 20px 20px 0px 0px;
    box-shadow: 0px -3px 6px rgba(6, 145, 161, 0.05);
    padding: 24px 16px;
    .title {
      font-size: 32rpx;
      font-weight: 700;
      color: rgba(56, 56, 56, 1);
      display: block;
    }
    .item {
      border-radius: 16px;
      box-shadow: 0px 2px 4px  rgba(5, 48, 7, 0.08);
      margin-top: 16px;
      padding: 32rpx;
      .driver-info {
        margin: 40rpx 0 28rpx 0;
      }
    }
    .sub-title {
      font-size: 20rpx;
      color: rgba(153, 153, 153, 1);
    }
    .go-time {
      font-size: 28rpx;
      color: rgba(51, 51, 51, 1);
      .green {
        color: rgba(47, 212, 184, 1);
        margin-right: 6rpx;
      }
    }
    .pay-num {
      text-align: center;
      font-size: 20rpx;
      color: rgba(51, 51, 51, 1);
      margin-top: 12rpx;
      .green {
        font-size: 24px;
        font-weight: 700;
        color: rgba(47, 212, 184, 1);
      }
    }
  }
}
.popup-div {
  padding: 24px 16px;
  box-shadow: 0px -3px 6px  rgba(6, 145, 161, 0.05);
  border-radius: 20px 20px 0px 0px;
  .popup-title {
    font-size: 28rpx;
    color: rgba(56, 56, 56, 1);
    line-height: 1.4;
    margin-bottom: 8rpx;
    display: block;
    .green {
      color: rgba(47, 212, 184, 1);
      font-weight: 700;
      margin-left: 2rpx;
    }
  }
  .popup-sub-title {
    font-size: 10px;
    line-height: 1.4;
    color: rgba(153, 153, 153, 1);
    display: block;
  }
}
.button {
  height: 44px;
  width: 90%;
  margin: 16rpx auto;
  ::v-deep {
    .u-button__text {
      font-size: 32rpx!important;
      font-weight: 700;
    }
  }
}
::v-deep {
  .u-fade-enter-active {
    display: none!important;;
  }
}
</style>